
<div class="demo">
	<ul id="sortable">
		<li class="ui-state-default twoOne">2.1</li>
		<li class="ui-state-default oneOne">1.1</li>
		<li class="ui-state-default oneOne">1.1</li>
		<li class="ui-state-default twoOne">2.1</li>
		<li class="ui-state-default twoTwo">2.2</li>
		<li class="ui-state-default twoOne">2.1</li>
		<li class="ui-state-default twoOne">2.1</li>
		<li class="ui-state-default oneOne">1.1</li>
		<li class="ui-state-default oneOne">1.1</li>
	</ul>
</div>
<style>
#sortable {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 960px;
}

.ui-state-default {
	margin: 0 8px 8px 0;
	float: left;
	font-size: 4em;
	text-align: center;
}

.oneOne {
	width: 229px;
	height: 200px;
}

.twoOne {
	width: 466px;
	height: 200px;
}

.twoOneHalf {
	width: 456px;
	height: 200px;
}

.oneTwo {
	width: 301px;
	height: 408px;
}

.twoTwo {
	width: 466px;
	height: 408px;
}

.threeTwo {
	width: 920px;
	height: 408px;
}

.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default
	{
	background: #E6E6E6;
}
​
</style>
<script>
	$(function() {
		$("#sortable").sortable();
		$("#sortable").disableSelection();});
</script>
